<!DOCTYPE html>
<%@page session="false" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <c:set var="user" value="${blog.user}"/>
  <c:set var="loginname" value="${user.loginName}"/>
  <c:set var="nickname" value="${user.nickname}"/>
  <c:set var="bpath" value="${blog.path}"/>
  <head>
    <title><c:out value="${nickname}"/>(<c:out value="${loginname}"/>)的个人技术博客</title>
    <meta name="description" content="${nickname}的个人技术博客">
    <meta name="keyword" content="${nickname},博客,技术,技术博客,${nickname}的技术博客">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <script type="text/javascript"> 
    	var blog ={id : "${blog.id}", path:"${bpath}"};
    	var basepath = "<%=basePath%>";
    	var path = "<%=path%>";
    	var classifyId ="${classifyId}";
    	var num = "${pager.num}";
    	var pages = "${pager.pages}";
    </script>
    <script type="text/javascript" src="<%=basePath%>resources/script/js/tools/load.js"></script>
    <script type="text/javascript">
    	script.map(["resources/script/js/tools/ajax.js","resources/script/js/tools/vo.js",
    	            "resources/script/js/dh/index-cnt.js","resources/script/js/dh/index-cly.js"
    	            ,"resources/script/js/article/article-list.js","resources/script/js/article/article-pager.js"
    	            ]);
    	script.path(path);
      	script.define(0);
    	script.define(1);
    	script.define(2,[0,1]);
    	script.define(3,[0,1]);
    	script.define(4,[1]);
    	script.define(5,[1]);
    	script.load(0);
    	script.load(1);
    </script>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>resources/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>resources/css/article-list.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>resources/css/icon.css"/>
     <link rel="stylesheet" type="text/css" href="<%=basePath%>resources/css/zm.css"/>
       <link rel="stylesheet" type="text/css" href="<%=basePath%>resources/css/pager.css"/>
  </head>
  <body>
 	<div class="nav-msg opacity">
	   	
	</div>
    <div class="body-content">
    	<div class="view-context btn-border">
    		<div class="top-wind">
    			<div class="top-block">
    				<span id="title-word">
    					<c:out value="${loginname}"/> blog
    				</span>
    				<p>
    					<span id="title-motto">
    						<c:out value="${user.motto}"/>
    					</span>
    				</p>
    			</div>
    			<ul class="top-navi">
    				<li class="btn-border">
    					<a href="<%=basePath%>${bpath}">首页</a>
    				</li>
    				<li class="selected btn-border">
    					<a href="javascript:void(0);">文章</a>
    				</li>
    				<li class="btn-border">
    					<a href="<%=basePath%>${bpath}/daily">日志</a>
    				</li>
    				<li class="btn-border">
    					<a href="<%=basePath%>${bpath}/photos">相册</a>
    				</li>
    				<li class="btn-border">
    					<a href="<%=basePath%>${bpath}/collection">收藏</a>
    				</li>
    			</ul>
    			<div id="search">
    				<input type="text" class="intext" value="输入关键词"/><span class="btn"></span>
    			</div>
    		</div>
    		<div class="side-wind btn-order">
    			<div class="side-div">
	    			<span class="span-tag">
	    				<span class="side"></span>
	    				<span class="content"><a>博主资料</a></span>
	    			</span>
	    			<a class="cen">
	    				<img alt="博主头像" width="150px" src="<%=basePath%>f<c:out value='${user.picpath}'/>">
	    			</a>
	    			<span class="cen tag_word">博主:<c:out value="${nickname}"/>(<c:out value="${loginname}"/>)</span>
	    			<span class="cen tag_word">个人兴趣:<c:out value="${user.description}"/></span>
	    			<span class="cen tag_word left">备注信息:<a><c:out value="${user.mark}"/></a></span>
	    			<hr/>
	    			<div id="counter">
	    			<span class="cen tag_word left">
	    				今日访问:
	    				<span class="tag_word" name="crtDay">loading...</span>
	    			</span>
	    			<span class="cen tag_word left">
	    				总访问量:
	    				<span class="tag_word" name="crtTotal">loading...</span>
	    			</span>
	    			<script type="text/javascript">script.load(2);</script>
	    			</div>
	    			<span class="cen tag_word left">最后登陆时间:<fmt:formatDate value="${user.loginTime}" pattern="yyyy年MM月dd日" /></span>
	    		</div>
	    		<div class="side-div">
	    			<span class="span-tag">
	    				<span class="side"></span>
	    				<span class="content"><a>文章分类</a></span>
	    			</span>
	    			<div id="classifier">
	    				<div name="content"></div>
		    			<div class="loading" name="loading">loading...</div>
		    		</div>
		    		<script type="text/javascript">script.load(3); </script>
	    		</div>
	    		<div class="side-div">
	    			<span class="span-tag">
	    				<span class="side"></span>
	    				<span class="content"><a>近期留言</a></span>
	    			</span>
	    		</div>
    		</div>
    		<div class="side-wind2 btn-border">
   				<div class="span-tag">
   					<span class="side"></span>
   					<span class="content"><a>文章</a></span>
   				</div>
   				<div class="div-content" id="articles">
   					<c:forEach items="${pager.datas}" var="article">
   						<div class="article" id="${article.id}">
   							<c:set var="url" value="${bpath}/article/${article.id}"/>
	   						<h2><a class="title" href="<%=path%>/${url}">${article.title}</a></h2>
	   						<div class="meta">
	   							<span class="meta-data"><fmt:formatDate value="${article.releaseTime}" pattern="yyyy年MM月dd日" /></span>
	   							<span class="meta-comment">${article.comments}条评论</span>
	   						</div>
	   						<div class="content">
	   							<p>${article.description}</p>
	   						</div>
	   						<c:if test="${!empty article.pics}">
	   							<div class="pics">
	   								<c:forEach items="${article.pics}" var="pic">
   									<img class="pic" vo-m="click:view_full" rsrc="<%=basePath%>f<c:out value='${pic.path}'/>" src="<%=basePath%>f<c:out value='${pic.pathCmpr}'/>"/>
   									</c:forEach>
	   							</div>
	   							<c:if test="${article.pics.size()>3}">
	   								<span class="pic-more" vo-m="pic_more">显示所有图片</span>
	   							</c:if>
	   						</c:if>
	   						<span class="pic-more" vo-m="click:view_full">显示所有图片</span>
	   						<div class="meta">
	   							<a href="<%=basePath%>${url}"  class="meta-more">Read more...</a>
	   						</div>
	   					</div>
   					</c:forEach>
   				</div>
   				<!-- 做SEO优化 -->
   				<c:if test="${classifyId != null}">
   					<c:set var="cly" value="/cly/${classifyId}"/>
   				</c:if>
   				<div class="pager">
   					<div class="pagination" id="pager">
   						<a vo-m="click:locate" idx="1">«</a>
   						<a vo-m="click:back">‹</a>
   						<c:if test="${pager.begin > 1}">
   							<a>...</a>
   						</c:if>
   						<c:forEach var="i" begin="${pager.begin}" end="${pager.end}" step="1">
   							<c:choose>
   								<c:when test="${i == pager.num}">
   									<a class="pager-select num">${i}</a>
   								</c:when>
   								<c:otherwise><a href="<%=basePath%>${bpath}/article${cly}/list/${i}" idx="${i}" vo-m="click:locate">${i}</a></c:otherwise>
   							</c:choose>
   						</c:forEach>
   						<c:if test="${pager.end < pager.pages}">
   							<a>...</a>
   						</c:if>
   						<a vo-m="click:next">›</a>
   						<a vo-m="click:locate" idx="${pager.pages}">»</a>
   					</div>
   					<span class="msg">总共${pager.total}条,每页显示:${pager.size}条</span>
   				</div>
    		</div>
    	</div>
    </div>
    <!-- 罩罩 -->
    <div class="zm" id="zm"  style="display:none">
    	<div class="zm-view">
    		<span class="zm-close" onclick="zm_close();"></span>
	    	<img src="<%=basePath%>f<c:out value='${user.picpath}'/>"/>
	    </div>
	    <div class="zm-box">
	    </div>
    </div>
  </body>
  <script type="text/javascript">
  		script.load(4);
  		script.load(5);
    	function zm_close(){/*罩罩的东西*/
    		document.getElementById("zm").style.display = "none";
    		document.body.style="";
    		document.body.setAttribute("style","");
    	};
  </script>
</html>
   						